<template>
    <div ref="chartContainer"></div>
    <test ref="testDom" :timeLineList="timeLineList" :dataList="dataList" :class="fullClass" :width="width"
        :height="height" @fullScreen="fullScreen"></test>

    <time-list :width="width" :height="height"></time-list>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import test from '@/components/FullChart/test.vue'
import timeList from './timeList.vue';

const chartContainer = ref(null);
const testDom = ref(null)

let width = ref(800)
let height = ref(400)
let fullClass = ref('')
let tempList = reactive([])
let timeLineList = reactive([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
let dataList = reactive([220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310])
const fullScreen = () => {
    console.log('全屏...')
    if (fullClass.value == 'full-class') {
        fullClass.value = ''
    } else {
        fullClass.value = 'full-class'
    }
    testDom.value.loadChart();
}
const newInterval = () => {
    setInterval(() => {
        timeLineList[9] = Math.floor(Math.random(10) * 350);
    }, 1000)
}
onMounted(() => {
    let interval = null
    let i = 0;
    interval = setInterval(() => {
        timeLineList[i] = dataList[i]
        i++;
        if (i == dataList.length) {
            clearInterval(interval)
            newInterval()
        }
    }, 1000)

})
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>